<!--  我的收藏 -->
<template>
  <div>
    <div class="flex">
      <div class="flex-left">
        <div class="navigationBar">
          <label>族目录</label>
        </div>
        <div class="flex-tree">
          <el-tree
            ref="tree"
            :data="data"
            node-key="Id"
            @node-click="handleNodeClick"
            :highlight-current="true"
          >
          </el-tree>
        </div>
      </div>
      <div class="flex-right">
        <navigation-bar customTitle="我的收藏">
          <div class="searchContent">
            <el-input
              v-model="folderName"
              placeholder="请输入元件名称"
              size="mini"
              style="width: 150px; margin-right: 10px"
            ></el-input>

            <custom-button
              type="search"
              style="margin-right: 10px"
              @searchClick="searchClick"
            ></custom-button>
            <custom-button
              type="reset"
              style="margin-right: 10px"
              @resetClick="resetClick"
            ></custom-button>
          </div>
        </navigation-bar>
        <tableHeightIndex
          :dataSource="dataSource"
          :tableColumns="tableColumns"
          :btnList="btnList"
          btnListWidth="110"
          :pageSize="pageSize"
          :pageCount="pageCount"
          :pageNo="pageNo"
          @pageChange="pageChange"
          @downloadRow="downloadRow"
          @scRow="scRow"
          :height="curHeight"
          @handleSelectionChange="handleSelectionChange"
        ></tableHeightIndex>
      </div>
    </div>

    <div v-if="showloading">
      <loadingMask></loadingMask>
    </div>
  </div>
</template>

<script>
import { presetFieldsForm } from "@/assets/form/managementCenter/expandManage/presetFieldsForm";
import customButton from "@/components/customComponents/customForm/customButton";
import tableHeightIndex from "@/components/customComponents/customeTable/tableHeightIndex.vue";
import navigationBar from "@/components/customComponents/managementCenter/navigationBar";
import { AjaxCommon } from "@/libs/apiCommon";
import { PopupCommon } from "@/libs/popupCommon";
import { Utility } from "@/libs/utility";
import loadingMask from "@/components/customComponents/loading";
export default {
  components: {
    navigationBar,
    customButton,
    tableHeightIndex,
    loadingMask,
  },
  data() {
    return {
      showloading: true,
      curHeight: 100,
      data: [],
      slList: [],
      tableIndex: "",
      tableName: "",
      tableList: [],
      selectItem: [],
      folderName: "",
      // table 相关参数  begin
      dataSource: [],
      tableColumns: [
        {
          prop: "FamilyName",
          label: "元件名称",
        },
        {
          prop: "UploadTime",
          label: "收藏时间",
        },
      ],
      btnList: ["download", "isSc"],
      pageSize: 20,
      pageCount: 100,
      pageNo: 1,
      // table 相关参数  end

      // 弹窗是否显示
      dialogShow: false,
      // 弹窗标题 (新增修改不同)
      dialogTitle: "",

      // form的配置信息
      formConfig: presetFieldsForm,
      type: "add",
    };
  },
  methods: {
    getHeight() {
      this.curHeight = window.innerHeight - 146;
    },
    stringToArrayBuffer(str) {
      console.log(str, "str....................");
      var buf = new ArrayBuffer(str.length);
      var bufView = new Uint8Array(buf);
      for (var i = 0, strLen = str.length; i < strLen; i++) {
        bufView[i] = str.charCodeAt(i);
      }
      return buf;
    },
    scRow(d) {
      var data = d.data;
      let self = this;
      AjaxCommon(
        "/api/favorite/favoritefamily?id=" + data.Id,
        "put",
        null
      ).then((res) => {
        if (res.data.status == 200) {
          PopupCommon.notify("success", "取消成功");
          self.initPage();
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    downItem(item) {
      console.log(item, "下载....");
      let self = this;
      AjaxCommon(
        "/api/familyresouce/downloadfile/" + item.Id,
        "get",
        null
      ).then((res) => {
        if (res.status == 200) {
          var data = self.stringToArrayBuffer(res.data);
          var blob = new Blob([data]);
          const href = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.download = item.FamilyName;
          link.href = href;
          link.click();
          try {
            document.body.removeChild(link);
          } catch (error) {
            console.log(error.message);
          }
          URL.revokeObjectURL(href); // 释放内存
        } else {
          PopupCommon.notify("error", res.data.msg);
        }
      });
    },
    handleNodeClick(data) {
      this.tableIndex = data.Id;
      this.tableName = data.FolderName;
      this.initPage();
    },
    tableClick(item) {
      this.tableIndex = item.id;
    },
    handleSelectionChange(d) {
      this.selectItem = d;
      console.log(d);
    },
    searchClick() {
      this.pageNo = 1;
      this.initPage();
    },
    resetClick() {
      this.folderName = "";
      this.initPage();
    },
    downloadRow(d) {
      this.downItem(d.data);
    },
    // 分页点击事件
    pageChange(p) {
      this.pageNo = p;
      this.initPage();
    },
    deleteRow(d) {
      console.log(d);
      const id = d.data.id;
      let self = this;
      AjaxCommon("/ccdc/cfg/device/device/delete?id=" + id, "delete", {
        optReason: d.optReason,
      }).then((res) => {
        console.log(res, "res...............");
        if (res.data.code == 200) {
          PopupCommon.notify("success", "删除成功");
          self.initPage();
        } else {
          PopupCommon.notify("error", res.data.message);
        }
      });
    },
    // 初始化事件
    async initPage() {
      const res = await AjaxCommon(`/api/favorite/getfavoritefamilys`, "get");
      var data = res.data.response;
      var datalist = data;
      if (datalist.length > 0) {
        datalist.map((t) => {
          t.isSc = 1;
          return t;
        });
      }
      if (this.folderName != "") {
        if (datalist.length > 0) {
          this.dataSource = datalist.filter(
            (t) =>
              t.FolderId == this.tableIndex &&
              t.FamilyName.indexOf(this.folderName) != -1
          );
        } else {
          this.dataSource = [];
        }
      } else {
        this.dataSource =
          datalist.length > 0
            ? datalist.filter((t) => t.FolderId == this.tableIndex)
            : [];
      }
    },
    initLeftFolder(callback) {
      this.showloading = true;
      let self = this;
      self.data = [];
      AjaxCommon(
        "/api/familyfolder/GetFullFolder?FolderType=1",
        "get",
        null
      ).then((res) => {
        console.log(res, "res.............");
        if (res.data.status == 200) {
          let treeDataList = [];
          Utility.createTreeTableData(res.data.response, treeDataList);
          console.log(treeDataList, "treeDataList.....");
          self.data = treeDataList;
          setTimeout(() => {
            if (treeDataList && treeDataList.length > 0) {
              console.log("self...............................");
              self.tableIndex = treeDataList[0].Id;
              self.tableName = treeDataList[0].FolderName;
              self.$nextTick(() => {
                self.$refs.tree.setCurrentKey(treeDataList[0].Id);
              });
              callback && callback();
            } else {
              self.tableIndex = "";
              self.tableName = "";
              self.tableList = [];
            }
            self.showloading = false;
          }, 1000);
        } else {
          PopupCommon.notify("error", res.data.msg);
          self.showloading = false;
        }
      });
    },
  },
  mounted() {
    this.$nextTick(() => {
      this.getHeight();
      this.initLeftFolder(() => {
        this.initPage();
      });
    });

    /*窗口自适应，关键代码*/
    window.onresize = () => {
      this.getHeight();
    };
  },
};
</script>

<style scoped>
.flex {
  display: flex;
}

.flex .flex-left {
  width: 350px;
  margin-right: 10px;
}

.flex .flex-right {
  flex: 1;
}

.flex .flex-left .navigationBar {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  margin-top: 10px;
}

.flex .flex-left .flex-tree {
  background-color: #fff;
  margin-top: 10px;
  height: calc(100vh - 168px);
  overflow-y: auto;
  padding: 10px;
}

.flex .flex-left .flex-tree .tree-item {
  height: 32px;
  line-height: 32px;
  margin: 5px 10px;
  padding: 0 10px;
  font-size: 14px;
  cursor: pointer;
}
.flex .flex-left .flex-tree .tree-item:hover {
  background-color: #e4f1fe;
}
.flex .flex-left .flex-tree .hover {
  background-color: #e4f1fe;
}

.flex .flex-left .navigationBar label {
  text-align: left;
  font-size: 16px;
  color: #333;
  margin-left: 10px;
}

.flex .flex-left .navigationBar span {
  float: right;
  margin-right: 10px;
  color: #333;
  cursor: pointer;
}

.singleTable {
  margin-bottom: 20px;
}
.singleBtn {
  position: absolute;
  bottom: 8px;
  right: 9px;
}
</style>
